<template>
  <view class="order-list-container">
    <view class="filter-bar">
      <u-tabs
        :list="tabList"
        :current="currentTab"
        @change="changeTab"
        lineColor="#007aff"
      ></u-tabs>
    </view>
    
    <view class="order-list">
      <view 
        class="order-item" 
        v-for="order in filteredOrders" 
        :key="order.id"
        @click="viewOrderDetail(order)"
      >
        <view class="order-header">
          <text class="order-id">订单号: {{ order.id }}</text>
          <u-tag  
            :text="getStatusText(order.status)" 
            :type="getStatusType(order.status)"
            size="mini"
          />
        </view>
        
        <view class="order-content">
          <view class="device-info">
            <u-icon name="car" size="30" color="#999"></u-icon>
            <text class="device-name">{{ order.deviceName }}</text>
          </view>
          
          <view class="order-amount">
            <text class="amount">¥{{ order.amount }}</text>
          </view>
        </view>
        
        <view class="order-footer">
          <text class="time">{{ formatTime(order.createdAt) }}</text>
          <view class="order-actions" v-if="order.status === 'pending'">
            <u-button 
              type="primary" 
              size="mini" 
              @click.stop="payOrder(order)"
            >
              立即支付
            </u-button>
          </view>
        </view>
      </view>
      
      <view class="no-data" v-if="filteredOrders.length === 0">
        <u-empty 
          mode="list" 
          text="暂无订单数据" 
          icon="http://cdn.uviewui.com/uview/empty/list.png"
        >
        </u-empty>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref, computed, onMounted } from 'vue'
import { onLoad, onShow } from '@dcloudio/uni-app'
import { usePaymentStore } from '@/store/payment'
import { formatTime } from '@/utils'

interface TabItem {
  name: string
  value: string
}

interface OrderItem {
  id: string
  deviceId: string
  deviceName: string
  amount: number
  status: 'pending' | 'paid' | 'cancelled' | 'refunded'
  createdAt: string
  paidAt?: string
}

// 支付store
const paymentStore = usePaymentStore()

// 标签页
const tabList = ref<TabItem[]>([
  { name: '全部', value: 'all' },
  { name: '待支付', value: 'pending' },
  { name: '已完成', value: 'paid' },
  { name: '已取消', value: 'cancelled' }
])

const currentTab = ref(0)

// 模拟订单数据
const mockOrders = ref<OrderItem[]>([
  {
    id: 'O20231010001',
    deviceId: 'D001',
    deviceName: '1号洗车机',
    amount: 15,
    status: 'paid',
    createdAt: '2023-10-10T10:30:00Z',
    paidAt: '2023-10-10T10:32:00Z'
  },
  {
    id: 'O20231010002',
    deviceId: 'D003',
    deviceName: '3号洗车机',
    amount: 25,
    status: 'pending',
    createdAt: '2023-10-10T14:20:00Z'
  },
  {
    id: 'O20231009001',
    deviceId: 'D002',
    deviceName: '2号洗车机',
    amount: 15,
    status: 'cancelled',
    createdAt: '2023-10-09T09:15:00Z'
  }
])

// 过滤后的订单列表
const filteredOrders = computed(() => {
  const orders = mockOrders.value
  const currentFilter = tabList.value[currentTab.value].value
  
  if (currentFilter === 'all') {
    return orders
  }
  
  return orders.filter(order => order.status === currentFilter)
})

// 获取状态文本
const getStatusText = (status: string) => {
  const statusMap: Record<string, string> = {
    pending: '待支付',
    paid: '已完成',
    cancelled: '已取消',
    refunded: '已退款'
  }
  
  return statusMap[status] || status
}

// 获取状态类型
const getStatusType = (status: string) => {
  const typeMap: Record<string, string> = {
    pending: 'warning',
    paid: 'success',
    cancelled: 'error',
    refunded: 'info'
  }
  
  return typeMap[status] || 'info'
}

// 切换标签页
const changeTab = (index: number) => {
  currentTab.value = index
}

// 查看订单详情
const viewOrderDetail = (order: OrderItem) => {
  uni.showToast({ title: '订单详情功能开发中', icon: 'none' })
}

// 支付订单
const payOrder = (order: OrderItem) => {
  // 设置当前订单
  paymentStore.setCurrentOrder(order)
  
  // 跳转到支付页面
  uni.navigateTo({
    url: `/pages/payment/checkout?orderId=${order.id}`
  })
}

onMounted(() => {
  // 初始化订单数据
  // 实际项目中应该从API获取数据
})

onLoad(() => {
  // 页面加载时的逻辑
})

onShow(() => {
  // 页面显示时的逻辑
})
</script>

<style lang="scss" scoped>
.order-list-container {
  padding: 20rpx;
  background-color: #f5f5f5;
  min-height: 100vh;
}

.filter-bar {
  background-color: #fff;
  border-radius: 20rpx;
  margin-bottom: 20rpx;
  box-shadow: 0 10rpx 30rpx rgba(0, 0, 0, 0.05);
}

.order-list {
  padding: 20rpx 0;
}

.order-item {
  background-color: #fff;
  border-radius: 20rpx;
  padding: 30rpx;
  margin-bottom: 20rpx;
  box-shadow: 0 10rpx 30rpx rgba(0, 0, 0, 0.05);
}

.order-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20rpx;
  
  .order-id {
    font-size: 28rpx;
    color: #999;
  }
}

.order-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20rpx;
  
  .device-info {
    display: flex;
    align-items: center;
    
    .device-name {
      font-size: 32rpx;
      color: #333;
      margin-left: 10rpx;
    }
  }
  
  .order-amount {
    .amount {
      font-size: 36rpx;
      font-weight: bold;
      color: #ff6600;
    }
  }
}

.order-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  
  .time {
    font-size: 24rpx;
    color: #999;
  }
}

.no-data {
  padding: 100rpx 0;
  text-align: center;
}
</style>